<template>
    <div class="swiper-container">
        <div class="swiper-pagination">
            <span class="swiper-pagination-bullet">全部订单</span>
            <span class="swiper-pagination-bullet">待评价</span>
            <span class="swiper-pagination-bullet">退款</span>
        </div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <ul>
                    <li class="DdXiangQing">详情1</li>
                </ul>
            </div>
            <div class="swiper-slide swiper-slide-active">
                <ul>
                    <li class="DdXiangQing">详情2</li>
                </ul>
            </div>
            <div class="swiper-slide swiper-slide-active">
                <ul>
                    <li class="DdXiangQing">详情3</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import Swiper from "swiper"

    export default {
        name: "DingDanSwiper",
        mounted() {
            new Swiper(".swiper-container", {
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    type: 'custom',
                    //自定义分页
                    renderBullet: function (index, className) {
                        if (index === 1) {
                            return '<span class="swiper-pagination-bullet ubolt-black"></span>';
                        } else {
                            return '<span class="swiper-pagination-bullet ubolt-white"></span>';
                        }

                    }
                },
            })
        }
    }
</script>

<style scoped>
    @import "/node_modules/swiper/dist/css/swiper.min.css";

    .swiper-container {
        width: 96vw;
        height: 220px;
        margin: 10px auto;
        border-radius: 15px;
    }

    .DdXiangQing {
        height: 180px;
        text-align: center;
    }

    .swiper-pagination {
        position: static;
    }

    .swiper-pagination-bullet {
        background-color: #f4f4f4;
        height: 40px;
        color: black;
        font-size: 18px;
    }

    .swiper-pagination-bullet[data-v-74642010] {
        opacity: 1;
        display: initial;
        margin: 0 17px
        }

    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet[data-v-74642010] {
        margin: 0 15px;
    }
</style>